<template>
  <div class="data-info">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goIndex">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content" style="font-size: 14px;">Agent详情</div>
        </div>
      </div>
      <div class="dataFrom">
        <el-tabs v-model="activeName">
          <el-tab-pane label="配置" name="1">
            <el-form ref="form" label-position="left" label-width="240px" :model="agentInfo">
              <div>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="Agent编码" prop="agentCode">
                      <el-input v-model="agentInfo.agentCode" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        Agent唯一标识不可重复
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="Agent名称" prop="agentName">
                      <el-input v-model="agentInfo.agentName" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        Agent名称不多于12位，且不可重复
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="Agent主机" prop="agentIp">
                      <el-input v-model="agentInfo.agentIp" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        Agent的IP地址(格式 xx.xx.xx.xx,例如:192.168.1.1)
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="Agent端口" prop="agentPort">
                      <el-input v-model="agentInfo.agentPort" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        不能多于5个字符
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="SSH用户名" prop="serverAccount">
                      <el-input v-model="agentInfo.serverAccount" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        用于AGENT自动化部署和启停
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="SSH端口" prop="serverPort">
                      <el-input v-model="agentInfo.serverPort" type="serverPort" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        用于AGENT自动化部署和启停
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="安装路径" prop="remoteInstallPath">
                      <el-input v-model="agentInfo.remoteInstallPath" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        远程服务器安装AGENT的路径
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="服务器版本" prop="serverVer">
                      <el-input v-model="agentInfo.serverVer" :disabled="true"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        服务器操作系统版本号
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="节点描述" prop="agentDesc">
                      <el-input type="textarea" :rows="2"
                                placeholder="请输入内容"
                                v-model="agentInfo.agentDesc" :disabled="true">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9" class="data_from_el-col">
                    <div class="hex-form-inf">
                      <div class="hex-form-inf-content">
                        节点的特殊信息描述备注
                      </div>
                      <i
                        class="el-icon-info hex-form-inf-icon"
                        @click="onOperInf($event)"
                        data-status="off"
                      ></i>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="2">
            <!--工具栏-->
            <div class="head-container" style="margin-top: 5px">
              <crudOperation/>
            </div>
            <!--表格渲染-->
            <el-table border stripe ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;"
                      @filter-change="crud.handleFilterChange"
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column v-if="columns.visible('startTime')" prop="startTime"
                               :show-overflow-tooltip="true"
                               label="开始时间" min-width="140">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="columns.visible('endTime')" prop="endTime"
                               :show-overflow-tooltip="true"
                               label="结束时间" min-width="140">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="columns.visible('operationType')" prop="operationType"
                               min-width="150px" label="操作"
                               key="operationType"
                               :filters="operationTypeFilters"
                               :filter-method="filterOptType"
                               filter-placement="bottom-end" :filter-multiple="false" column-key="operationType">
                <template slot-scope="scope">
                  {{ getOptShwoText(scope.row.operationType) }}
                </template>
              </el-table-column>
              <el-table-column v-if="columns.visible('costTime')" prop="costTime" label="耗时"/>
              <el-table-column v-if="columns.visible('crtUser')" :show-overflow-tooltip="true"
                               prop="crtUser" label="操作人"/>
              <el-table-column v-if="columns.visible('status')" :show-overflow-tooltip="true" label="状态"
                               prop="status"
                               key="status"
                               :filters="[{ text: '成功', value: 'SUCCESS' }, { text: '失败', value: 'FAIL' }]"
                               :filter-method="filterAgentStatus"
                               filter-placement="bottom-end" :filter-multiple="false" column-key="status">
                <template slot-scope="scope">
                  <el-tag size="small" v-if="scope.row.status=='SUCCESS'" align="center"
                          type="success"
                          style="width:60px;">成功
                  </el-tag>
                  <el-tag size="small" v-if="scope.row.status=='FAIL'" align="center" type="error"
                          style="width:60px;">失败
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column v-if="columns.visible('runLog')" width="120" prop="runLog" label="执行日志">
                <template slot-scope="scope">
                  <div>
                    <el-button type="info" icon="el-icon-search"
                               @click="showRunLog(scope.row.runLog)">查看
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    <el-dialog title="执行日志" :visible.sync="runLogDialogVisible" width="30%" center>
      <div style="max-height: 400px;overflow-y: auto">
        <p v-html='runLogInfo'></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/components/CRUD.OnlyLookOperation'

const defaultForm = {}
const defaultCrud = CRUD({
  title: 'AGENT管理',
  url: '/api/agentOptLog/selectPages',
  sort: 'sort,asc'
})
export default {
  name: 'agentInfo',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    init: {
      type: Function,
      default: null
    },
    agentInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      runLogDialogVisible: false,
      runLogInfo: null,
      activeName: '1',
      operationTypeFilters: [
        {text: '发布', value: 'install'},
        {text: '启动', value: 'start'},
        {text: '停用', value: 'stop'},
        {text: '重启', value: 'restart'}
      ]
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.params['agentCode'] = this.agentInfo.agentCode
    },
    onOperInf: function (e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
    getOptShwoText(operationType) {
      let text = '未知';
      this.operationTypeFilters.forEach(val => {
        if (operationType === val.value) {
          text = val.text;
        }
      })
      return text;
    },
    filterAgentStatus(value, row) {
      return row.status === value;
    },
    showRunLog(info) {
      this.runLogDialogVisible = true
      this.runLogInfo = info
    },
    goIndex() {
      this.init();
    },
    filterOptType(value, row) {
      return row.operationType === value;
    },
  }
}
</script>
<style scoped>
.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

>>> .el-dialog__header {
  border-bottom: 1px solid #EBEEF5;
}
</style>
